<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" media="screen" href="../static/jqgrid/css/jquery-ui.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../static/jqgrid/css/trirand/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../static/bootstrap-4.1.1/bootstrap.min.css" />

<style>
html, body {
   margin: 0;
   padding: 0;
   font-size: 75%;
   height:100%;
}

</style>
</head>
<body>

<div class="container-fluid px-1">

	<!-- 导航 -->
	<nav>
	  <ol class="breadcrumb mb-2">
	    <li class="breadcrumb-item">基础信息管理</li>
	    <li class="breadcrumb-item active">客户信息维护</li>
	  </ol>
	</nav>
	
	<!-- 查询form表单 -->	
	<form id="form-co-query" class="form-inline mb-2">
	
	
		<div class="input-group mr-2">
		  <div class="input-group-prepend">
		    <label class="input-group-text">状态</label>
		  </div>
		  <select class="cotom-select" name="co_status">
		    <option value=''>全部</option>
		    <option value="00">未确定</option>
		    <option value="22">确定</option>
		    <option value="55">启用</option>
		    <option value="77">禁用</option>
		  </select>
		</div>
	
		<div class="input-group mr-2">
		  <div class="input-group-prepend">
		    <span class="input-group-text">编号</span>
		  </div>
		  <input type="text" class="form-control" name="co_id" >
		</div>
		
		<div class="input-group  mr-2">
		  <div class="input-group-prepend">
		    <span class="input-group-text">名称</span>
		  </div>
		  <input type="text" class="form-control" name="co_name" >
		</div>
		
		<div class="input-group  mr-2">
		  <div class="input-group-prepend">
		    <span class="input-group-text">备注</span>
		  </div>
		  <input type="text" class="form-control" name="co_remark" >
		</div>
		
		<button id="bn-co-query" type="button" class="btn btn-primary">查询</button>
		
	</form>

	<!-- 操作按钮 -->
	<div class="btn-group mb-2 mt-2">
	  <button type="button" id="bn-co-add" class="btn btn-primary">新增</button>
	  <button type="button" class="btn btn-primary">确定</button>
	  <button type="button" class="btn btn-primary">启用</button>
	  <button type="button" class="btn btn-primary">禁用</button>	
	  <button type="button" id="bn-co-del-multi" class="btn btn-danger">删除</button>	    
	</div>
	
	<!-- 
		功能描述：在本页加载完成时，即发送ajax请求，获取客户信息的json格式的数据，通过生成一个表格 。
		具体实现：采用基于jquery的js插件jqGrid来生成表格
		如何下载jqGrid：访问github，搜索jqGrid
	-->
	
	<div id="pager"></div>
	<table id="grid"></table>

</div>

<script src="../static/jqgrid/js/jquery.min.js" type="text/javascript"></script>
<script src="../static/jqgrid/js/trirand/i18n/grid.locale-cn.js" type="text/javascript"></script>
<script src="../static/jqgrid/js/trirand/jquery.jqGrid.min.js" type="text/javascript"></script>

<script src="../static/js/popper-1.14.3.min.js" type="text/javascript"></script>
<script src="../static/bootstrap-4.1.1/bootstrap.min.js" type="text/javascript"></script>

<script src="../static/layer/layer.js"></script>

<script type="text/javascript">
  
  //窗口编号
  let layerIdx;

  $("#grid").jqGrid({
    datatype: 'json',
    url: 'color',
    mtype:'GET',
    colModel: [
       {name: 'co_id', label : '花色编号' , key:true},
       {name: 'co_name', label : '花色名称'},
       {name: 'co_remark', label : '花色备注'},
       {name: 'co_status_name', label : '花色状态'},
       {
    	   name: 'co_id', 
    	   label : '操作',
    	   formatter:function(value){
    		   return `<button data-id="\${value}" class="btn btn-primary btn-sm bn-co-upd" >修改</button> `+
    		   		  `<button data-id="\${value}" class="btn btn-danger btn-sm bn-co-del" >删除</button>`;
    	   }
       }
     ],
     
     pager:'#pager',
     rowNum:3,
     rowList:[2,3,5,10,15],
     multiselect:true,
     autowidth:true, 
    
     responsive:true
 });
  //console.log($(window).height());
  /* $("#grid").setGridHeight($(window).height()-60);
  $("#grid").setGridWidth($(window).width()-2);
  $(window).resize(function(){  
      $("#grid").setGridHeight($(window).height()-60);
      $("#grid").setGridWidth($(window).width()-2);
     }); */ 
     
    /* $("#grid").on("jqGridBeforeSelectRow", function(event, rowid) {
   	 	//console.log(rowid);
   	 	//event.preventDefault();//阻止默认行为
   	 	return false;//即阻止默认行为，又阻止冒泡行为
   	}); */
     
    //表格加载完成后设置修改和单删按钮事件，因为这些按钮在生成表格时才生成
    $("#grid").on("jqGridGridComplete", function(event) {
	      
    	  //修改按钮事件
	   	  $('.bn-co-upd').click(function(){
	   		  
	   		  let co_id = $(this).attr('data-id');//attr方法是jquery的方法，作用是访问属性
	   		  
	   		  $.get('color_upd_to',`co_id=\${co_id}`,function(html){
	   			  
	   			  layerIdx = layer.open({
	   			      type: 1,
	   			      area: ['700px', '540px'],		
	   			      skin:'layui-layer-lan',
	   			      anim: 1,
	   			      content: html
	   			  });
	   			   
	   		  },'html');
	   		  
	   		  return false;
	   		  
	   	  });	
    	  
	   	//单删除按钮事件
	   	  $('.bn-co-del').click(function(){
	   		  
	   		  let co_id = $(this).attr('data-id');//attr方法是jquery的方法，作用是访问属性
	   		  
	   		  //确认是否删除
	  		  layer.confirm('你确实要删除该花色信息吗？', {icon: 3, title:'警告'}, function(index){
	  			//参数index是本确认框的编号
	  			 
	  			let loadLayerIdx = layer.load();//显示加载层
	  			
	  			$.ajax({
	  				url:`color/\${co_id}`,
	  				method:'delete',
	  				//contentType:'application/json',
	  				//data:JSON.stringify(selIds),
	  				dataType:'json'
	  			})
	  			.done((result)=>{
	  				
	  				layer.close(loadLayerIdx);
	  				
	  				if(result.success){
	  					reloadData();//重载数据
	  					layer.msg(
	  							result.message, 
	  							{
	  							  icon: 1,
	  							  time: 1000 //1秒关闭（如果不配置，默认是3秒）
	  							}
	  					); 
	  					layer.close(layerIdx);//关闭窗口
	  				}else{
	  					layer.msg(result.message, {icon: 6}); 
	  				}
	  			})
	  			.fail((xhr)=>{
	  				
	  				layer.close(loadLayerIdx);
	  				layer.msg('服务器错误！', {icon: 6}); 
	  				
	  			});
	  			  
	  			layer.close(index);//关闭确认框
	  			
	  		});
	  	 
	   		return false;
	   		  
	   	  });	
      
    }); 
  
  //重载数据   
  const reloadData = function(){
 	  let arr=$('#form-co-query').serializeArray();
	  
	  let params={}; //params['kkk']=6  ===== params.kkk=6
	  
	  for(let i=0;i<arr.length;i++){
		  params[arr[i].name]=arr[i].value;
	  }
	  
	  $("#grid").jqGrid('setGridParam',{ 
          url:"color", 
          postData:params, //发送数据 
          page:1 
      }).trigger("reloadGrid"); 
  }
     
  $('#bn-co-query').click(function(){
	  
	  reloadData();
	  
  });
  
  //添加按钮事件
  $('#bn-co-add').click(function(){
	  $.get('color_add_to',function(html){
		  
		  layerIdx = layer.open({
		      type: 1,
		      area: ['700px', '540px'],		
		      skin:'layui-layer-lan',
		      anim: 5,
		      content: html
		  });		  
 
	  },'html');
  });
  
  //多删除按钮事件
  $('#bn-co-del-multi').click(function(){
	  
	   var selIds = $("#grid").jqGrid('getGridParam','selarrrow');
	   if(!selIds || selIds.length==0){
		   layer.msg('您没有选择任何数据！', {icon: 2}); 
		   return;
	   }
	   
		//确认是否删除
		layer.confirm('你确实要删除这些花色信息吗？', {icon: 3, title:'警告'}, function(index){
			//参数index是本确认框的编号
			 
			let loadLayerIdx = layer.load();//显示加载层
			
			$.ajax({
				url:'color',
				method:'delete',
				contentType:'application/json',
				data:JSON.stringify(selIds),
				dataType:'json'
			})
			.done((result)=>{
				
				layer.close(loadLayerIdx);
				
				if(result.success){
					reloadData();//重载数据
					layer.msg(
							result.message, 
							{
							  icon: 1,
							  time: 1000 //1秒关闭（如果不配置，默认是3秒）
							}
					); 
					layer.close(layerIdx);//关闭窗口
				}else{
					layer.msg(result.message, {icon: 6}); 
				}
			})
			.fail((xhr)=>{
				
				layer.close(loadLayerIdx);
				layer.msg('服务器错误！', {icon: 6}); 
				
			});
			  
			layer.close(index);//关闭确认框
			
		});
		
  });

</script>

</body>
</html>